<template>
  <!-- 项目实施 - 点击右上角 - tab6相关数据 - 表单流程弹窗 -->
  <div class="next-level-form-modal" v-loading="loading">
    <el-row :gutter="6">
      <el-col :span="17" class="next-level-form-modal-l">
        <div class="next-level-form-modal-t">
          <p class="p1" :title="formModalDetail.doc.text">{{formModalDetail.doc.text}}</p>
          <p class="p2"> 西落 2024-06-26 09:42:05 </p>
          <div class="header-tab">
            <div>
              <span v-for="(i, idx) in tabs" :key="idx" @click="changeTab(idx)" :class="actTab == idx ? 'act' : ''"> {{i}} </span>
            </div>
            <div class="icons">
              <el-tooltip v-for="(i,idxI) in imgs" :key="idxI" class="item" effect="dark" :content="i.msg" placement="top">
                <img :class="'icons-img'+(idxI+1)" :src="i.path" width="18" @click="$message.info(i.msg)">
              </el-tooltip>
              
              <el-dropdown @command="showTip">
                <i class="el-dropdown-link el-icon-more" style="cursor: pointer;"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :class="'more-img'+(idxI+1)" v-for="(i,idxI) in moreImgs" :key="idxI" :command="i.msg">
                    <img :src="i.path" width="18" class="vam">
                    <span> {{i.msg}} </span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="next-level-form-modal-b">
          <div v-if="actTab == '0'" class="next-level-form-modal-b-content">
            <div class="content-bg">
              <formName :text="formModalDetail.imgs.contentImgTitle"></formName>
              <div class="form-content">
                <formPart v-for="(i, idx) in formModalDetail.formList" :key="'list'+idx" :showListTitle="i.title ? true : false" :listTitle="i.title" :btns="i.btns" :tip="i.tip" ref="info1" :modalTitle="i.modalTitle" :formList="i.list"></formPart>
              </div>
            </div>
          </div>
          <div v-if="actTab == '1'">
            <div class="btns">
              <el-button type="primary" plain @click="flowModal(true)"> 流程预测 </el-button>
              <el-divider direction="vertical"></el-divider>
              <span> 泳道 </span>
              <el-switch v-model="switchBtn" active-color="#11a983">
              </el-switch>
            </div>
            <div class="flow-modal-bgi">
              <img class="flow-bgi" :src="formModalDetail.imgs.img1"  height="250px"/>
              <img v-if="switchBtn" class="flow-bgi-border" :src="formModalDetail.imgs.img2" height="250px"/>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="next-level-form-modal-r">
        <rightTab :tabList="formModalDetail.tabList" :dataList="formModalDetail.rTabData" :menuType="formModalDetail.title" :actIdx="formModalDetail.actIdx"></rightTab>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import rightTab from "../../components/rightTab";
export default {
  name: "rightTabFormModal",
  components: {formName, formPart, rightTab},
  data() {
    return {
      loading: false,
      actTab: '0',
      switchBtn: true,
      tabs: ['表单', '流程'],
      imgs: [
        {
          msg: '打印',
          path: require('../../images/icon-form-modal-1.png'),
        },
        {
          msg: '查看明细日志',
          path: require('../../images/icon-form-modal-2.png'),
        },
        {
          msg: '查看属性状态',
          path: require('../../images/icon-form-modal-3.png'),
        },
        {
          msg: '流程最大化',
          path: require('../../images/icon-form-modal-4.png')
        }
      ],
      moreImgs: [
        {
          msg: '致信交流',
          path: require('../../images/icon-form-modal-5.png'),
        },
        {
          msg: '流程说明书',
          path: require('../../images/icon-form-modal-6.png'),
        }
      ]
    }
  },
  props: {
    formModalDetail: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    formModalDetail: {
      handler(n, o) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('resize', this.resize);
    this.resize();
  },
  methods: {
    /**
     * @author Wrl
     * 提示信息
     */
    showTip(msg) {
      this.$message.info(msg)
    },
    /**
     * @author Wrl
     * 流程预测弹窗
     */
    flowModal(val) {
      this.$emit('changeFlowModal', val)
    },
    /**
     * @author Wrl
     * 
     */
    changeTab(idx) {
      this.resize()
      this.actTab = idx.toString();
    },
    /**
     * @author Wrl
     * 动态获取高度
     */
    resize() {
      this.loading = true;
      let formModalH = document.querySelector('.next-level-form-modal').offsetHeight;
      if(formModalH) {
        document.querySelector('.next-level-form-modal-r').style.height = `${formModalH}px`;
      }
      setTimeout(() => {
        this.loading = false;
      }, 600)
    },
  },
  beforeCreate () {
    this.$options.components.rightTab = require('../rightTab').default;
  },
}
</script>

<style lang="scss" scoped>
  .next-level-form-modal {
    max-height: 74vh;
    box-sizing: border-box;
    overflow: overlay;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .next-level-form-modal-t,
    .next-level-form-modal-b,
    .next-level-form-modal-r {
      padding-right: 0;
      border-radius: 8px;
      position: relative;
      box-sizing: border-box;
    }
    .next-level-form-modal-t {
      padding: 10px 16px;
      background: #ffffff;
      .p1 {
        color: #333;
        font-size: 16px;
        margin: 0;
        font-family: Arial, PingFang SC, Microsoft YaHei, Helvetica, sans-serif, SimSun;
      }
      .p2 {
        margin-top: 4px;
        font-size: 14px;
        color: #666666;
      }
      .header-tab {
        display: inline-flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        span {
          cursor: pointer;
          padding: 10px 12px;
          text-align: center;
          &.act {
            color: #11A983;
            border-bottom: 1px solid #11A983;
          }
          &:hover {
            color: #11A983;
          }
        }
        .icons {
          width: 180px;
          display: inline-flex;
          justify-content: space-between;
          align-items: flex-end;
          img {
            cursor: pointer;
          }
          i {
            font-size: 20px;
          }
          .icons-img1:hover {
            content: url('../../images/icon-form-modal-act-1.png');
          }
          .icons-img2:hover {
            content: url('../../images/icon-form-modal-act-2.png');
          }
          .icons-img3:hover {
            content: url('../../images/icon-form-modal-act-3.png');
          }
          .icons-img4:hover {
            content: url('../../images/icon-form-modal-act-4.png');
          }
        }
      }
    }
    .next-level-form-modal-l,
    .next-level-form-modal-r {
      border-radius: 8px;
      height: 600px;
    }
    .next-level-form-modal-b {
      background: #ffffff;
      margin-top: 5px;
      padding: 20px;
      box-sizing: border-box;
      overflow: overlay;
      height: 499px;
      &-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 90%;
        margin: 0 auto;
      }
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      p {
        width: 770px;
        height: 54px;
        line-height: 54px;
        font-weight: bold;
        font-size: 28px;
        font-family: "Microsoft YaHei";
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
        background: #11A983;
      }
      .btns {
        text-align: right;
      }
    }
    .flow-modal-bgi {
      position: relative;
      display: block;
      margin: 20px;
      height: 400px;
      overflow: overlay;
      .flow-bgi {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
      .flow-bgi-border {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      &.bg1 {
        margin: 0 auto 20px;
      }
    }
  }
  .vam {
    vertical-align: middle;
  }
  .more-img1:hover {
    img {
      content: url('../../images/icon-form-modal-act-5.png');
    }
  }
  .more-img2:hover {
    img {
      content: url('../../images/icon-form-modal-act-6.png');
    }
  }
</style>
